<template>
  <div class="item_container">
    <p class="class_name">{{ exam.name }}</p>
    <div class="right">
      <p class="class_create_time">{{ showDate }}</p>
      <p class="class_name">{{ mClass.name }}</p>
      <el-button v-if="refereeFunction!=undefined && isAdmin"  :disabled="!showReferee" class="btn_mini" @click="refereeFunction">批阅</el-button>
      <el-button :disabled="showReferee && isAdmin" class="btn_mini" @click="btnFunction">
        <slot></slot>
      </el-button>
      <el-button  @click="emit('del',exam)" class="btn_mini" :disabled="showReferee" v-if="isAdmin" type="danger">删除</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {defineComponent, onMounted, PropType, ref} from 'vue'
import {ClassRequest, GradeRequest} from '../../request/MyRequset'
import {Class, Exam, User} from '../../types/mytypes';
import {mysqlTimeToMyDate} from "../../tools/mysqlTool";
import {UserStore} from "../../store/store";
const props = defineProps<{
  exam:Exam,
  classId:number,
  btnFunction:Function,
  refereeFunction?: Function
}>()
const emit = defineEmits(['del'])

let showDate = ref("")
let isAdmin =ref(false)
let showReferee = ref(false)
const user:User = UserStore.getUser()
let mClass = ref<Class>({} as Class)

onMounted(async ()=>{
  mClass.value = (await ClassRequest.getById(props.classId)).data
  showDate.value = mysqlTimeToMyDate(props.exam.create_time as string);
  let gradeReq = await GradeRequest.getByExamId(props.exam.id as number)
  if(gradeReq.suc){
    //如果考试已经有成绩了，则直接关闭管理模式，只允许批阅
    if(gradeReq.data.length >0){
      showReferee.value = true;
    }
  }
  if (props.refereeFunction != undefined) {
    let nowDate = new Date();
    let examDate = new Date(props.exam.end_time as string)
    //判定考试是否已结束
    if (nowDate > examDate) {
      showReferee.value = true;
    }
  }
  let adminRes = await ClassRequest.getClassAllAdmin(mClass.value.id)
  if(adminRes.suc){
    for(let i in adminRes.data){
      let u = adminRes.data[i]
      if(u.id == user.id){
        isAdmin.value = true;
        break;
      }
    }
  }
})

</script>

<style scoped lang="scss">
.item_container {
  display: flex;
  flex-direction: row;
  height: 3em;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding-left: 1em;
  overflow: hidden;

  .class_name {
    font-weight: bold;
    font-size: 1.1em;
  }

  .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
    width: 61%;

    .class_create_time {
      color: #999;
      margin-right: 10px;
    }

    .class_name {
      color: #999;
      margin-right: 10px;
      font-weight: bold;
    }

    .btn {
      width: 39%;
    }
    .btn_mini {
      width: 10%;
    }
  }
}
</style>